<template>
    <!-- 备注 弹窗 -->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">{{
                    !is_add ? "备注详情" : "添加备注"
                }}</view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <div v-if="!is_add">
                <view class="cate-list comm-list">
                    <view class="note-box">
                        <view
                            class="note-item"
                            v-for="(item, index) in newNoteArr"
                            :key="index"
                        >
                            <view>
                                <view class="n-i-a">
                                    <view>{{
                                        item.uname == "客户" ? "我" : "商家"
                                    }}</view>
                                    <view class="n-i-a-r">{{
                                        item.atime_txt
                                    }}</view>
                                </view>
                                <view class="n-i-b">
                                    <view class="n-i-b-a" v-if="item.txt">{{
                                        item.txt
                                    }}</view>
                                    <view
                                        class="n-i-b-img"
                                        v-if="item.imgs && item.imgs.length > 0"
                                    >
                                        <view
                                            class="item-img"
                                            v-for="(items, indexs) in item.imgs"
                                            :key="indexs"
                                        >
                                            <el-image
                                                :src="items.img_s"
                                                fit="cover"
                                                @click="
                                                    setSrcList(item, indexs)
                                                "
                                            >
                                            </el-image>
                                        </view>
                                    </view>
                                    <view class="checkbox-box">
                                        <el-checkbox
                                            v-model="item.isopen"
                                            true-label="1"
                                            false-label="'2'"
                                            @change="isopenFun(item, $event)"
                                            >对客户是否可见</el-checkbox
                                        >
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <div class="but-box">
                    <el-button @click="addFun">添加备注</el-button>
                </div>
            </div>
            <div class="cate-content" v-else>
                <div class="add-box">
                    <div class="dialog-form">
                        <el-form
                            ref="brandform"
                            :model="brandform"
                            :hide-required-asterisk="true"
                        >
                            <el-form-item>
                                <addPhoto
                                    ref="AddPhoto"
                                    @uploadAavatar="uploadAavatar"
                                    @deiimgFun="deiimgFun"
                                ></addPhoto>
                            </el-form-item>
                            <el-form-item>
                                <el-input
                                    type="textarea"
                                    v-model="brandform.txt"
                                    placeholder="添加详情,200字以内"
                                    show-word-limit
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox
                                    v-model="brandform.isopen"
                                    true-label="1"
                                    false-label="'2'"
                                    >对客户是否可见</el-checkbox
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="add-but">
                    <el-button @click="cancelFun">取消</el-button>
                    <el-button
                        type="primary"
                        @click="submitFun"
                        :loading="is_isbut"
                        >提交</el-button
                    >
                </div>
            </div>
        </view>
        <imageCropper
            ref="imageCropper"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>
        <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="srcList"
        />
    </view>
</template>

<script>
import config from "@/js/conf/Config.js";
import addPhoto from "@/components/comm/AddPhoto.vue";
import imageCropper from "@/components/comm/ImageCropper.vue";
import staticConst from "@/js/const/StaticConst.js";
import elImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
    props: ["newNoteArr", "orderInfos", "md"],
    components: {
        addPhoto,
        imageCropper,
        elImageViewer,
    },
    data() {
        return {
            srcList: [],
            openShow: 0,
            is_add: false,
            is_isbut: false,
            editUrl: "",
            showViewer: false,
            brandform: {
                id: "",
                imgs: [],
                id_txt: "",
                isopen: "2",
                txt: "",
            },
        };
    },
    methods: {
        setSrcList(data, index) {
            this.showViewer = true;
            this.srcList = [];
            const imgbox = [...data.imgs];
            let funum = imgbox.length - index;
            let imgarr = imgbox.splice(index, funum);
            const hebarr = imgarr.concat(imgbox);
            hebarr.map((v) => {
                this.srcList.push(v.img_b);
            });
        },
        closeViewer() {
            this.showViewer = false;
        },
        cancelFun() {
            this.is_add = false;
        },
        /*****上传图片成功*****/
        uploadPicSuccess(index, name) {
            this.brandform.imgs.push({ index, name });
        },
        /*******上传图片*******/
        uploadAavatar(data) {
            this.editUrl = data.url;
        },
        // 删除图片
        deiimgFun(data) {
            this.brandform.imgs.map((v, i) => {
                if (data.index == i) {
                    this.brandform.imgs.splice(i, 1);
                }
            });
        },
        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.AddPhoto.confirm(data, this.uploadPicSuccess);
        },
        /****取消上传****/
        cancel() {
            this.$refs.AddPhoto.cancel();
        },
        setAddPhoto() {
            this.$nextTick(() => {
                let data = {};
                data.type = staticConst.UPLOAD_ORDER_REMASK;
                data.list = [
                    {
                        url: "",
                        imgs: "",
                        imgs: "",
                        isDel: false,
                    },
                ];
                this.$refs.AddPhoto.initPhotoData(data);
            });
        },
        // 提交
        submitFun() {
            if (!this.brandform.txt && this.brandform.imgs.length == 0) {
                this.$msg({ title: "备注内容和图片不能同时为空" });
                return;
            }
            this.is_isbut = true;
            let img_arr = [];
            this.brandform.imgs.map((v) => {
                img_arr.push(v.name);
            });
            let param = {
                isopen: this.brandform.isopen,
                imgs: img_arr,
                txt: this.brandform.txt,
                type: "1",
            };
            this.txtSaveFun(param);
        },
        isopenFun(item, val) {
            let param = {
                id: this.orderInfos.id,
                id_txt: item.id,
                isopen: val,
                type: "2",
            };
            this.txtSaveFun(param);
        },
        async txtSaveFun(data) {
            let url = config.COMM_TXT_SAVE;
            let param = {
                id: this.orderInfos.id,
                md: staticConst.YY_ADD_GOODS,
                obj: "order",
            };
            param = Object.assign(param, data);
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && data.type == 1) {
                this.is_isbut = false;
                this.openShow = 0;
                this.$emit("updateFun", this.orderInfos);
            }
        },
        addFun() {
            if (this.orderInfos.lock_txt) {
                this.$msg({ title: this.orderInfos.lock_txt });
            } else {
                this.is_add = true;
                this.brandform.txt = "";
                this.brandform.imgs = [];
                this.setAddPhoto();
            }
        },
        /**显示分类面板 type:0付款记录，1：操作记录**/
        toggleBillsStateMask(type, data) {
            this.is_add = false;
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
        },

        close() {
            this.toggleBillsStateMask();
        },
    },
};
</script>

<style lang="scss" scoped>
.cate-content {
    ::v-deep.but-box {
        padding: 5px 10px;
        .el-button {
            width: 100%;
        }
    }

    ::v-deep.add-box {
        min-height: 500px;
        padding: 0 10px;
        .el-textarea__inner {
            min-height: 150px !important;
            font-size: initial;
        }
    }
    .add-but {
        padding: 5px 10px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #ece3e3;
    }
    .checkbox-box {
        display: flex;
        justify-content: flex-end;
    }
}
</style>

<style lang="scss">
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 16px;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 10px;
}
.cate-list {
    height: 500px;
}
.note-box {
    margin-bottom: 20upx;
    .note-title {
        padding: 20upx 30upx;
        background: #fff;
        font-size: 30upx;
        .imi-icon {
            position: absolute;
            right: 20upx;
            color: #999;
        }
        .icon-xia {
            transform: rotate(-90deg);
        }
        .icon-shang {
            transform: rotate(90deg);
        }
    }
    .note-item {
        padding: 0upx 30upx;
        background: #fefefe;
        border-top: 2upx solid #ececec;
        .n-i-a {
            padding-top: 20upx;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            font-size: 30upx;
            .n-i-a-r {
                color: #999;
            }
        }
        .n-i-b {
            .n-i-b-a {
                padding: 10upx 0;
            }
            .n-i-b-img {
                display: flex;
                flex-wrap: wrap;
                ::v-deep.item-img {
                    width: 32%;
                    height: 200upx;
                    margin-right: 2%;
                    margin-bottom: 20upx;
                    overflow: hidden;
                    .el-image {
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                    }
                }
                .item-img:nth-child(3n + 3) {
                    margin-right: 0%;
                }
            }
        }
    }
}
</style>